<template>
  <div class="rc-cropper" v-if="data.src">
    <canvas :id="data.src" :key="key" ref="canvas"></canvas>
    <div class="rc-cropper__iconCrop1">
      <el-tooltip content="裁剪" placement="right">
        <el-button type="primary" size="small" @click="initCropper()" :disabled="croppShow">裁剪</el-button>
      </el-tooltip>
      <el-tooltip content="确认裁剪" placement="right" v-if="cropper">
        <el-button type="success" size="mini" @click="sureCropper()"><i class="el-icon-check"></i></el-button>
      </el-tooltip>
      <el-tooltip content="取消裁剪" placement="right" v-if="cropper">
        <el-button type="danger" size="small" @click="cancelCropper()" v-if="cropper"><i class="el-icon-close"></i></el-button>
      </el-tooltip>
    </div>
  </div>
</template>
<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
export default {
  name: 'Cropper',
  props: {
    data: {
      type: Object,
      required: true,
      default: () => {}
    },
    aspectRatio: {
      type: Number,
      default: () => {
        return 3 / 2
      }
    }
  },
  data() {
    return {
      cropper: null,
      croppShow: false
    }
  },
  computed: {
    key() {
      return new Date().valueOf()
    }
  },
  mounted() {
    this.drawImg()
  },
  methods: {
    // 在canvas上绘制图片
    drawImg(href) {
      this.$nextTick(() => {
        const canvas = document.getElementById(this.data.src)
        if (canvas) {
          canvas.width = this.data.width || 720
          canvas.height = this.data.height || 480
          const ctx = canvas.getContext('2d')
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          const img = new Image()
          img.crossOrigin = 'Anonymous'
          img.src = href || this.data.src
          img.onload = function() {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
          }
        }
      })
    },
    // 显示裁剪框
    initCropper() {
      this.drawImg()
      this.croppShow = true
      const cropper = new Cropper(this.$refs.canvas, {
        checkCrossOrigin: true,
        viewMode: 1,
        aspectRatio: this.aspectRatio
      })
      this.cropper = cropper
    },
    // 确认裁剪
    sureCropper() {
      const _this = this
      this.cropper.getCroppedCanvas().toBlob(function(blob) {
        const href = window.URL.createObjectURL(blob)
        _this.drawImg(href)
        _this.$emit('fileBlob', blob)
      }, 'image/jpeg')

      _this.cancelCropper()
    },
    // 销毁裁剪框
    cancelCropper() {
      this.cropper.destroy()
      this.croppShow = false
      this.cropper = null
    }
  }
}
</script>
<style scoped>
.rc-cropper {
  position: relative;
}

img {
  width: 100%;
  height: 100%;
}

.rc-cropper__iconCrop1 {
  position: absolute;
  right: 4%;
  top: 0%;
  display: flex;
  flex-flow: column;
}

.el-button {
  margin: 20px 0;
  /* display: block; */
  z-index: 10000;
}
</style>
